<template>
    <section class="Counselor-box">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <div class="row">
                        <h2>Consultant Team</h2>
                        <h1>
                            <p class="clearfix">
                                <i class="iconfont icon-guwenguanli"></i> 顾问团队
                            </p>
                        </h1>
                    </div>
                </div>
            </div>
        </article>
        <!--顾问团队列表-->
        <div class="main-content">
            <div class="container">
                <a-tabs  type="card" @change="locationIdChange">
                    <a-tab-pane v-for="(item, index) in aTabPane" :key="item.key" :tab="item.tab">
                        <a-collapse :bordered="false" accordion v-show="!noDataShow" v-for="(item, index) in counselorListData" :key="index">
                            <a-collapse-panel class="counselorList-collapse">
                                <template slot="header">
                                    <a-card :title="null" hoverable :loading="counselorListLoading">
                                        <a-row :gutter="8" class="counselorList-box">
                                            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
                                                <img v-lazy="consultantPhotoIsNullImg(item.photo)" :title="item.chineseName" :alt="item.chineseName"/>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
                                                <header class="clearfix">
                                                    <span>{{ isNull0(item.chineseName) }}</span> |
                                                    <span>{{ isNull0(item.englishName) }}</span> |
                                                    <span>{{ isNull0(item.jobTitle) }}</span>
                                                    <span>置业案例：<em>{{ isNull0(item.estatecase) }}</em></span>
                                                    <span>满意度：<em>{{ isNull0(item.satisfaction) }}%</em></span>
                                                </header>
                                                <p class="webkit-text-overflow-3lines" v-html="isNull0(item.description)"></p>
                                                <footer>联系方式：400-600-4982</footer>
                                            </a-col>
                                        </a-row>
                                    </a-card>
                                </template>
                                <a-tabs>
                                    <a-tab-pane tab="基本资料" key="1">
                                        <div class="basic-information clearfix">
                                            <span>姓名：{{isNull0(item.chineseName)}}</span>
                                            <span>职业经验：{{isNull0(item.experience)}}</span>
                                            <span>满 意 度：{{ isNull0(item.satisfaction)}}%</span>
                                            <span>性别：{{isNull0(item.gender)}}</span>
                                            <span>成功案例：{{isNull0(item.estatecase)}}</span>
                                            <span>服务区域：{{isNull0(item.cityName)}}</span>
                                            <span>星座：{{isNull0(item.constellation)}} </span>
                                            <span>家乡：{{isNull0(item.hometown)}} </span>
                                            <span>血型：{{isNull0(item.blood)}}</span>
                                            <span>婚姻：{{isNull0(item.marriage)}}</span>
                                            <span>入职时间：{{momentFormat(item.joinTime, 'YYYY-MM-DD')}}</span>
                                            <span>职业特长：{{isNull0(item.specialty)}} </span>
                                        </div>
                                    </a-tab-pane>
                                    <a-tab-pane tab="个人情况" key="2">
                                        <div class="personal-situation clearfix" v-html="isNull0(item.personalInfo)"></div>
                                    </a-tab-pane>
                                    <a-tab-pane tab="教育经历" key="3">
                                        <div class="education clearfix" v-if="item.educations.length > 0">
                                            <p>{{ isNull0(item.educations[0].school) }}【{{ isNull0(item.educations[0].major) }}】</p>
                                            <p>{{ isNull0(item.educations[0].curriculum) }}</p>
                                        </div>
                                        <div v-else>暂未查询到数据！</div>
                                    </a-tab-pane>
                                    <a-tab-pane tab="顾问风采" key="4">
                                        <div class="consultant-photo clearfix" v-if="item.photos.length > 0">
                                            <a-row :gutter="20">
                                                <a-col :span="8" v-for="(list, indexL) in item.photos" :key="indexL" style="margin: 10px 0;">
                                                    <img v-lazy="list.photo" style="width: 100%; height: 270px;"/>
                                                </a-col>
                                            </a-row>
                                        </div>
                                        <div v-else>暂未查询到数据！</div>
                                    </a-tab-pane>
                                </a-tabs>
                            </a-collapse-panel>
                        </a-collapse>

                        <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
                            <a-pagination
                                    :showTotal="total => `共 ${total} 条`"
                                    showQuickJumper
                                    showSizeChanger
                                    :current="pageNumber"
                                    :pageSize="pageSize"
                                    :total="total"
                                    @change="pageNumberChange"
                                    @showSizeChange="pageSizeChange"/>
                        </div>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                locationId: '1', // 顾问列表地区国家id
                //顾问列表地区国家tab切换数据
                aTabPane: [
                    {
                        tab: '北京',
                        key: '1',
                    },
                    {
                        tab: '上海',
                        key: '2',
                    },
                    {
                        tab: '美国',
                        key: '4',
                    }
                ],
                counselorListData: [],//顾问列表数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数
                counselorListLoading: true,//列表加载loading
                noDataShow: false,//左侧列表——没有数据提示信息是否显示

            }
        },
        metaInfo () {
            return {
                title: '置业顾问_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '华美优胜置业顾问，华美优胜投资顾问，美国房产投资顾问，美国房产置业顾问，美国房产专家，美国房产投资专家' },
                    { vmid: 'description', name: 'description', content: '华美优胜美国房产投资专家是美国房产投资专家，美国房产置业顾问' },

                ],
            }
        },
        activated(){
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取顾问团队列表数据
            this.getCounselorList(this.locationId);
        },
        methods: {
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.counselorListLoading = true;
                this.getCounselorList();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.counselorListLoading = true;
                this.getCounselorList();
            },
            // 获取顾问团队列表数据
            getCounselorList(locationId) {
                this.$get(`/counselor/list/${this.pageNumber}/${this.pageSize}?locationId=${this.locationId}`).then(res => {
                    this.counselorListLoading = false;
                    if (res.status === 0) {
                        this.counselorListData = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            // 顾问列表地区国家tab切换change事件
            locationIdChange(key) {
                this.counselorListLoading = true;
                this.locationId = key;
                this.pageNumber = 1;
                this.pageSize = 10;
                this.getCounselorList()
            },

        },
        components: {
            'app-header': Header,
            BackTop,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .Counselor-box {
            //背景图
            .bg-box {
                background: url(/static/img/ConsultantTeam4.jpg) no-repeat center center;
                background-size: cover;
                padding: 0 !important;
                > .inside {
                    background: rgba(15, 40, 54, 0.6);
                    > .container {
                        padding: 200px 0;
                        > .row {
                            text-align: center;
                            > h2 {
                                font-size: 35px;
                                font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                                font-weight: 100;
                                color: #fff;
                            }
                            > h1 {
                                line-height: 35px;
                                font-size: 30px;
                                padding: 20px 0 30px 0;
                                color: #fff;
                                > p {
                                    display: inline-block;
                                    > i {
                                        font-size: 35px;
                                        color: #3cd0c5;
                                        float: left;
                                        margin: 0 10px 0 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            /*顾问团队列表*/
            .main-content{
                >.container {
                    padding: 60px 0;
                    >.ant-tabs {
                        overflow: initial;
                        .counselorList-collapse {
                            border-radius: 3px;
                            background: #fff;
                            -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            color: #212121;
                            padding: 10px 15px;
                            margin: 20px 0;
                            overflow: hidden;
                            >.ant-collapse-header {
                                /*padding: 0;*/
                                //隐藏箭头指向
                                .arrow {
                                    /*display: none;*/
                                }
                                .ant-card {
                                    border: none;
                                    > .ant-card-body {
                                        padding: 0;
                                        .counselorList-box {
                                            > div {
                                                > img {
                                                    width: 140px;
                                                }
                                                > header {
                                                    font-size: 16px;
                                                    > span {
                                                        // float: left;
                                                        margin: 0 20px;
                                                        > em {
                                                            font-size: 18px;
                                                            color: red;
                                                        }
                                                    }
                                                }
                                                > p {
                                                    margin: 20px 0 0 0
                                                }
                                                > footer {
                                                    margin: 40px 0 0 0;
                                                    font-size: 16px;
                                                }
                                            }
                                        }
                                    }
                                }
                                .ant-card:hover{
                                    box-shadow: none;
                                }
                            }
                            /*基本资料、个人情况、教育经历、顾问风采*/
                            >.ant-collapse-content{
                                .ant-tabs-tabpane {
                                    text-align: left;
                                    >div{
                                        > span {
                                            float: left;
                                            width: 33.33%;
                                            margin: 5px 0;
                                        }
                                        >p {
                                            margin: 12px 0;
                                        }
                                        >img{
                                            float: left;
                                            margin: 8px;
                                            max-width: 200px
                                        }
                                    }
                                }
                            }
                        }
                        .counselorList-collapse:hover {
                            -webkit-box-shadow: 0 0 70px rgba(0, 0, 0, 0.1);
                            box-shadow: 0 0 70px rgba(0, 0, 0, 0.15);
                            -webkit-transform: translate3d(0, 0px, -2px);
                            transform: translate3d(0, 1px, -2px);
                        }
                    }
                }
            }

        }
    }
</style>
